<template>
    <div style="min-height: 450px" class="login" ref="login">
        <div class="login-bg">
            <div class="login-form">
                <div class="login-logo">
                    <img src="../assets/logo.png">
                </div>
                <div class="login-form-table">
                    <mu-input class="login-input" icon-width="40px" v-model="mobile" type="tel" placeholder="请输入手机号码"
                              iconClass="iconfont icon-user login-icon-font login-icon-user"></mu-input>
                    <mu-input class="login-input" type="password" ref="pass" v-model="password" icon-width="40px"
                              placeholder="请输入密码" iconClass="ion ion-locked login-icon-font"></mu-input>
                    <div class="login-input">
                        <vux-button class="login-submit" @click.native="onLogin">登录</vux-button>
                    </div>
                    <div class="login-frogot">
                        <router-link to="retrieval1">忘记密码？</router-link>
                    </div>
                </div>
            </div>
            <footer class="login-footer">立即拨打<a href="tel:15922764574" style="color:white; font-weight: bold">15922764574</a>洽谈合作
            </footer>
        </div>
        <vux-confirm v-model="show" class="login-confirm" cancelText="确定" confirmText="找回密码" @on-cancel="onCancel"
                     @on-confirm="onConfirm">
            <div class="login-confirm-label">{{label}}</div>
        </vux-confirm>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../store/constants.vue'
    import {
        MInput
    } from 'muka-ui'
    import {
        XButton,
        Confirm
    } from 'vux'
    import {
        xhr,
        domStyle
    } from 'muka'
    import md5 from 'js-md5'

    export default {
        name: 'login',
        components: {
            'mu-input': MInput,
            'vux-button': XButton,
            'vux-confirm': Confirm
        },
        data: function () {
            return {
                mobile: '',
                password: '',
                show: false,
                label: '',
                code: ''
            }
        },
        created: function () {
            this.mobile = ''
            this.password = ''
        },
        computed: mapState([
            VUEX_NAME.myInfo
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.cMyInfo
            ]),
            onConfirm: function () {
                this.$router.push('/retrieval1')
                this.show = false
            },
            onCancel: function () {
                if (this.code === '10021005') {
                    this.password = ''
                    this.$refs.pass.focus()
                }
            },
            onLogin: function () {
                this.code = ''
                let re = /^(\+86)?1[34578]\d{9}$/
                if (!re.test(this.mobile)) {
                    this.$vux.toast.show({
                        text: '请输入正确的电话号码',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                if (!this.password) {
                    this.$vux.toast.show({
                        text: '请输入密码',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                this.$ajax(
                    'login',
                    {
                        mobile: this.mobile,
                        password: md5(this.password)
                    },
                    (content) => {
                        if (content.actived === 0) {
                            this.$router.push('/well')
                        } else {
                            this.$router.push('/')
                        }
                    })
            }
        }
    }

</script>
